<template>
    <div class='my_container'>
        <div class="backdrop"></div>
        <div class="my_content">
            <div class="my_detail">
                <div class="avatar">
                    <img :src="userDetail.icon" alt="" style="border-radius: 50%;">
                </div>
                <div class="name_detail">
                    <span class="userName">{{userDetail.username}}</span>
                    <span style="font-size:13px;color:#837f7f;"> {{$t('wechat.phone')}}：{{userDetail.phone }}</span>
                    <span style="font-size:13px;color:#837f7f;"> {{$t('wechat.loginDate')}}：{{ userDetail.updatetime }}</span>
                </div>
            </div>
        </div> 
        <div class="line"></div>
    </div>
</template>

<script>
import { getUserDetailApi } from '@/api/addApp/pinDuoDuo_api.js'
export default {
    name:'pinDuoDuo',
    props:['sendData'],
    data () {
        return {
            userDetail:{}
        };
    },
    mounted() {
        this.getUserDetail()
    },
    methods: {
        async getUserDetail(){
            let data={
                proof_num:this.sendData.proof_num,
                acctid:this.sendData.nick
            }
            try {
                let list = await getUserDetailApi(data);
                this.userDetail = list.data[0];
            } catch (error) {
                console.error(error)
            }
        }
    },
};
</script>

<style lang='scss' scoped>
.my_container {
    position: relative;

    .backdrop {
        background: linear-gradient(to bottom, #e5f5f9, #fff);
        width: 100%;
        height: 200px;
    }

    .my_content {
        position: absolute;
        top: 50px;
        left: 7%;
        background-color: #fff;
        width: 86%;
        height: 150px;
        border-radius: 10px;
        padding: 20px;

        .my_detail {
            display: flex;

            .avatar {
                border-radius: 50%;
                width: 80px;
                height: 80px;
                overflow: hidden;

                img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                }
            }

            .name_detail {
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .userName {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 220px;
                    font-weight: 900;
                    font-size:15px;
                }
            }
        }
        .my_message{
            display: flex;
            width: 100%;
            justify-content: space-around;
            margin-top: 25px;
        }
    }

    .line {
        height: 1px;
        width: 100%;
        background-color: #e5e2e3;
        margin-top: 10px;
    }
}
</style>